<template>
  <div class="todo-page">
    <van-sticky>
      <van-nav-bar
        :title="title"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
      />
      <!-- 搜索条件 -->
      <ConditionCpt
        v-if="userInfo"
        :flag-key="activeNames"
        :user-info="userInfo"
        :all-grade-info="allGradeInfo"
        @searchData="searchData"
      >
      </ConditionCpt>
    </van-sticky>
    <div>
      <!-- loading -->
      <van-loading
        v-if="loading"
        type="spinner"
        size="24px"
        style="margin-top: 10px; text-align: center"
      />
      <!-- 内容 -->
      <van-list v-else-if="userInfo">
        <!-- tab标签页 -->
        <van-tabs
          v-model:active="doneType"
          swipeable
          border
          line-width="50%"
          class="tab-content"
        >
          <van-tab name="undone">
            <!-- 标题 -->
            <template #title>
              <div>
                未完成
                <van-badge
                  :content="childData['undone']['qty']"
                  :color="filterColor(childData['undone']['qty'])"
                />
              </div>
            </template>
            <!-- 内容 -->
            <template #default>
              <!-- 表格 -->
              <Table
                v-if="doneType === 'undone'"
                ref="refUndoneTable"
                :option="childData['undone']"
                :user-info="userInfo"
                :done-type="doneType"
                :condition-op="conditionOp"
                :active-names="activeNames"
                :handle-text="'去处理'"
                :all-grade-info="allGradeInfo"
                @refreshTodoTotal="refreshTodoTotal"
              />
            </template>
          </van-tab>
          <van-tab name="done">
            <!-- 标题 -->
            <template #title>
              <div>
                已完成
                <van-badge
                  :content="childData['done']['qty']"
                  :color="filterColor(0)"
                />
              </div>
            </template>
            <!-- 内容 -->
            <template #default>
              <!-- 表格 -->
              <Table
                v-if="doneType === 'done'"
                ref="refDoneTable"
                :option="childData['done']"
                :user-info="userInfo"
                :done-type="doneType"
                :condition-op="conditionOp"
                :active-names="activeNames"
                :handle-text="'查看'"
                :all-grade-info="allGradeInfo"
                @refreshTodoTotal="refreshTodoTotal"
              />
            </template>
          </van-tab>
        </van-tabs>
      </van-list>
    </div>
  </div>
</template>

<script lang="ts">
import axios from '/@/api/axios'
import Table from './table.vue'
import ConditionCpt from './condition/index.vue'
import { useRoute } from 'vue-router'
import { useStore } from '/@/store'
import { defineComponent, ref, reactive, computed, onBeforeMount } from 'vue'
import { getUserInfo, refreshTodoData } from '/@/util/business-util'
import { getTodoTotalByType } from './config'

export default defineComponent({
  components: { Table, ConditionCpt },
  setup() {
    const route = useRoute()
    const { commit, state, dispatch } = useStore()
    const activeNames: any = route.query.activeNames // 当前待办类型
    const refUndoneTable: any = ref(null) // 未完成表格的ref
    const refDoneTable: any = ref(null) // 已完成表格的ref
    let userInfo: any = ref(null) // 用户信息
    let allGradeInfo: any = ref([]) // 所有年级信息
    let doneType: any = ref('undone') // 是否完成的类型
    let loading: any = ref(false) // 每个待办列表的loading对象

    onBeforeMount(async () => {
      // 获取年级数据
      axios.get(`/api/blade-system/grade/list`).then((res) => {
        allGradeInfo.value = res.data.data || []
        console.log(allGradeInfo)
      })
      loading.value = true
      // 获取用户信息
      userInfo.value = await getUserInfo(
        commit,
        state,
        state.user.userId,
        false
      )
      await refreshTodoData(commit, userInfo.value)
      loading.value = false
      dispatch('initLevelOptions') // 初始化所有预警等级
    })
    // 待办列表数量
    const todoList = computed(() => state.todoData.data)
    const title = computed(() => {
      let data = state.todoData.data
      let item = data.find((item: any) => item.key === activeNames)

      return (item && item.name) || ''
    })

    let childData: any = reactive({
      undone: {},
      done: {},
    }) // 待办详情数据，数据结构：{undone:{qty: 10, columns: [], data: []}, done: {qty: 100, columns: [], data: []}}
    let conditionOp: any = ref({}) // 查询条件

    function onClickLeft() {
      history.back()
    }
    return {
      activeNames,
      refUndoneTable,
      refDoneTable,
      userInfo,
      allGradeInfo,
      todoList,
      childData,
      title,
      doneType,
      conditionOp,
      loading,
      onClickLeft,
      // 搜索
      searchData(activeNames: string, conditions: any) {
        conditionOp.value = conditions
        // 加载数据
        let _ref =
          doneType.value === 'undone'
            ? refUndoneTable.value
            : refDoneTable.value
        _ref.reload(conditionOp.value)
      },
      // 刷新数量
      refreshTodoTotal() {
        // 根据类型获取已完成/未完成的数量
        getTodoTotalByType(activeNames, userInfo.value, conditionOp.value).then(
          (obj: any) => {
            childData['undone']['qty'] = obj['undoneQty']
            childData['done']['qty'] = obj['doneQty']
          }
        )
      },
    }
  },
  methods: {
    // 根据数量返回颜色
    filterColor(qty: number | string) {
      // 待办数量区分颜色
      const colorMap = [
        {
          range: [0, 0], // 数量范围
          color: '#808080', // 颜色
        },
        {
          range: [1, 10], // 数量范围
          color: '#FFA500', // 颜色
        },
        {
          range: [11, 99999999], // 数量范围
          color: '#FF0000', // 颜色
        },
      ]
      // 过滤数据
      const data = colorMap.find((c) => {
        return Number(qty) >= c.range[0] && Number(qty) <= c.range[1]
      })
      return (data && data.color) || ''
    },
  },
})
</script>

<style lang="less" scoped>
@import '/@/styles/index.less';

.todo-page {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 50px;
  // 已选择的tab
  /deep/ .van-tab--active {
    color: @theme-color;
  }
  // tab下面的线
  /deep/ .van-tabs__line {
    height: 2px;
    background-color: @theme-color;
  }
  .tab-content {
    padding: 0 20px;
    background-color: #fff;
  }
}
/deep/ .van-cell__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
